<template>
    <div class="Neditor">
        <vue-neditor-wrap v-model="content" :config="myConfig" :destroy="false" @ready="ready"></vue-neditor-wrap>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import { useStore } from "vuex";
import VueNeditorWrap from './vue-neditor-wrap.vue';
import utils from "@/lib/utils";
import config from "@/config";
/**
 * state 数据类型
 */
interface IState {
    /**
     * 是否显示上传图片组件
     */
    showUploadImage: boolean;
    /**
     * 编辑器插入图片回调
     */
    NeditorInsertImage: any;
    /**
     * 编辑器内容
     */
    content: any;
    /**
     * 编辑器配置
     */
    myConfig: any;
}
export default defineComponent({
    name: "Neditor",
    components: { VueNeditorWrap },
    props: {
        modelValue: {
            type: String,
            default: ""
        },
        height: {
            type: Number,
            default: 320
        },
        readonly: {
            type: Boolean,
            default: false
        },
    },
    emits: ["update:modelValue"],
    setup(props, { emit }) {
        const store = useStore();
        const { UIAuth, bodySize } = toRefs(store.state);
        const imgHost = config.fileHost;
        const state = reactive<IState>({
            showUploadImage: false,
            NeditorInsertImage: () => false,
            content: "",
            myConfig: {
                // 如果需要上传功能,找后端小伙伴要服务器接口地址
                // serverUrl: '/api/web/upload/ueditor',
                // 你的UEditor资源存放的路径,相对于打包后的index.html
                UEDITOR_HOME_URL: './public/NEditor/',
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                // 初始容器高度
                initialFrameHeight: 320,
                // 初始容器宽度
                initialFrameWidth: '100%',
                // 是否开启只读
                readonly: false,
                // 关闭自动保存
                enableAutoSave: false,
                toolbars: [
                    [
                        "fullscreen",
                        "source",
                        "|",
                        "undo",
                        "redo",
                        "|",
                        "bold",
                        "italic",
                        "underline",
                        "fontborder",
                        "strikethrough",
                        "superscript",
                        "subscript",
                        "removeformat",
                        "formatmatch",
                        "autotypeset",
                        "blockquote",
                        "pasteplain",
                        "|",
                        "forecolor",
                        "backcolor",
                        "insertorderedlist",
                        "insertunorderedlist",
                        "selectall",
                        "cleardoc",
                        "|",
                        "rowspacingtop",
                        "rowspacingbottom",
                        "lineheight",
                        "|",
                        "customstyle",
                        "paragraph",
                        "fontfamily",
                        "fontsize",
                        "|",
                        "directionalityltr",
                        "directionalityrtl",
                        "indent",
                        "|",
                        "justifyleft",
                        "justifycenter",
                        "justifyright",
                        "justifyjustify",
                        "|",
                        "touppercase",
                        "tolowercase",
                        "|",
                        "link",
                        "unlink",
                        "anchor",
                        "|",
                        "imagenone",
                        "imageleft",
                        "imageright",
                        "imagecenter",
                        "|",
                        // "simpleupload",
                        "insertimage",
                        "map",
                        "insertframe",
                        // "webapp",
                        "pagebreak",
                        // "template",
                        "background",
                        "|",
                        "horizontal",
                        "date",
                        "time",
                        "spechars",
                        "|",
                        "inserttable",
                        "deletetable",
                        "insertparagraphbeforetable",
                        "insertrow",
                        "deleterow",
                        "insertcol",
                        "deletecol",
                        "mergecells",
                        "mergeright",
                        "mergedown",
                        "splittocells",
                        "splittorows",
                        "splittocols",
                        "charts",
                        "|",
                        "searchreplace",
                        "help"
                    ]
                ],
            }
        });
        function init() {
            if (utils.empty(props.modelValue)) {
                state.content = "";
            } else {
                state.content = props.modelValue;
            }
            // console.log("内容=",this.content);
        }
        function insertImage(insertimg: any = () => false) {
            console.log("点击了插入图片");
            state.NeditorInsertImage = insertimg;
            state.showUploadImage = true;
        }
        function ready(Neditor: any) {
            init();
            Neditor.insertImage = insertImage;
        }
        function selectImage(image: any) {
            state.NeditorInsertImage(`${imgHost}${image.src}`);
            state.showUploadImage = false;
        }
        watch(() => props.modelValue, (newVal) => init());
        watch(() => state.content, (newVal) => {
            // console.log("newVal", newVal);
            emit("update:modelValue", newVal);
        });
        onMounted(() => {
            state.myConfig.initialFrameHeight = props.height;
            state.myConfig.readonly = props.readonly;
        });
        return {
            UIAuth,
            bodySize,
            ...toRefs(state),
            ready,
            insertImage,
            selectImage
        };
    },
});
</script>

<style scoped lang="scss">
</style>